<template>
  <view class="page-container">
    <!-- 顶部用户信息 -->
    <view class="header">
      <text class="welcome-text">欢迎 {{ userInfo.name}}用户</text>
			<u-icon name="scan"  size="23"></u-icon>
    </view>

    <!-- Tab 菜单 -->
    <view class="tab-menu">
			<u-subsection activeColor="var(--primary-color)" :list="tabs" :current="current" @change="sectionChange"></u-subsection>
    </view>
		
		<!-- 主题内容 -->
		<view class="non-urgent-service">
			<!-- 订单信息 -->
			<view v-if="!isOrder">
				<view class="order-info">
					<view class="section-title">我的订单</view>
					<view class="shop-name">
						<text>{{shopName}}</text>
						<view class="phoneClass" @tap="contactService(service)">
							<u-icon name="phone" color="var(--primary-color)"  size="20"></u-icon>
							<text style="margin-left: 3px;">联系商家</text>
						</view>
					</view>
					<view class="problem-description">
						<text class="label">问题描述：</text>
						<text class="description">{{problemDescription}}</text>
					</view>
					
					<!-- 上传图片 -->
					<view class="upload-section">
						<text class="label">上传图片：</text>
						<view class="image-preview">
							<u--image
							class="preview-image"
							    :showLoading="true"
							    v-for="(img, index) in images" :key="index" :src="img"
							    width="100%"
							    height="100%"
							    @click="click"
							  ></u--image>
				
						</view>
					</view>
				</view>
				
				<!-- 操作按钮 -->
				<view class="action-buttons">
					<button class="btn cancel" @click="cancelOrder">取消订单</button>
					<button class="btn confirm" @click="confirmOrder">等待确认</button>
				</view>
			</view>
			<view v-if="isOrder">
				<!-- 地图区域 -->
				<view class="map-container">
					<map
						id="googleMap"
						:latitude="mapLatitude"
						:longitude="mapLongitude"
						:scale="scale"
						:markers="markers"
						:controls="controls"
						show-location
						@controltap="onControlTap"
						@regionchange="onRegionChange"
					></map>
				</view>
				
				<!-- 附近服务 -->
				<view class="service-list">
					<view class="service-title">附近服务</view>
					<view
						v-for="(service, index) in services"
						:key="index"
						class="service-item"
					>
						<view @click="orderClick">
							<view class="service-info">
								<view class="name-box">
									<text class="service-name">{{ service.name }}</text>
									<text class="service-type">{{ service.type }}</text>
								</view>
								<view>
									<text class="service-star"  v-for=" index in 5" :key="'star-'+index">☆</text>
									<text class="service-mark">5.0</text>
								</view>
							</view>
							<view class="price-box">
								<text class="service-price">时薪：{{ service.price }}</text>
								<text class="service-distance">{{ service.distance }}km</text>
							</view>
							<view class="service-actions">
								<view class="tagList">
									<u-tag class="tagItem" text="维修" type="warning" plain size="mini"></u-tag>
									<u-tag class="tagItem" text="砍价" type="success" plain size="mini"></u-tag>
								</view>
								<view class="phoneClass" @tap="contactService(service)">
									<u-icon name="phone" color="var(--primary-color)"  size="20"></u-icon>
									<text style="margin-left: 3px;">联系商家</text>
								</view>
							</view>
												
						</view>
					</view>
				</view>
			</view>
			 <!-- 会员提示弹窗 -->
			<view v-if="showPopup"  class="local-popup">
				<view class="membership-dialog" >
					<view class="dialog-title">成为会员可以查看全部信息</view>
					<view class="dialog-price">月卡20/月</view>
					<view class="button-group">
						<button class="openClass" @click="openMembership">立即开卡</button>
						<button class="closeClass" @click="closePopup">取消</button>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部导航 -->
		<view class="bottom-nav">
			<view class="nav-item" @tap="navigateTo('index')">
				<text>首页</text>
			</view>
			<view class="nav-item" @tap="navigateTo('mine')">
				<text>我的</text>
			</view>
		</view>
  </view>
</template>
<script>
export default {
	components:{
	},
  data() {
    return {
      tabs: ['非紧急', '保养', '维修'], // Tab 菜单
      // mapLongitude: 121.473701, // 地图经度
      // mapLatitude: 31.230416, // 地图纬度
			list: ['未付款', '待评价', '已付款'],
			current: 0,
			showPopup: false,
			isOrder:false,
      services: [
        // 服务商列表
        {
          name: 'XXXXXX',
          type: 'MC',
          price: '10~15$',
          distance: 20.21,
        },
        {
          name: 'XXXXXX',
          type: 'MC',
          price: '10~15$',
          distance: 20.31,
        },
      ],
			userInfo: {
				name: '',
				isMember: false
			},
			shopName: "xxxxxxx店", // 店铺名称
			problemDescription: "xxxxxxxxxxxxxx", // 问题描述
			images: [
				"https://uviewui.com/album/1.jpg",
				"https://uviewui.com/album/1.jpg",
				"https://uviewui.com/album/1.jpg",
				"https://uviewui.com/album/1.jpg",
			], // 上传的图片
			contactInfo: "" ,// 联系方式
			
			// 地图基础配置
			    mapLatitude: 31.230416,
			    mapLongitude: 121.473701,
			    scale: 14, // 初始缩放级别（3-20）
			    
			    // 地图控制器
			    controls: [{
			      id: 11,
			      iconPath: '/static/zoom-in.png',
			      position: { left: 10, top: 100, width: 30, height: 30 }
			    }, {
			      id: 12,
			      iconPath: '/static/zoom-out.png',
			      position: { left: 10, top: 140, width: 30, height: 30 }
			    }],
			    
			    // 标记点
			    markers: [{
			      id: 1,
			      latitude: 31.230416,
			      longitude: 121.473701,
			      title: "当前位置",
			      // iconPath: '/static/location-pin.png'
			    }]
		};
  },
	onLoad() {
		// 从缓存加载用户信息
		this.loadUserInfo();
		
		// 检查会员状态
		// this.checkMembership();
	},
	onReady() {
	  this.updateMap();
	},
	mounted() {
	},
  methods: {
		cancelOrder(){
			this.isOrder=true
		},
		confirmOrder(){
			
		},
		orderClick(){
			uni.navigateTo({
				// url: `/pages/order/detail?orderId=${orderId}`
				url: `/pages/order/detail/index`
			})
		},
		 // 加载用户数据
		loadUserInfo() {
			const info = uni.getStorageSync('userInfo') || {};
			this.userInfo = {
				name: info.name || '新',
				isMember: info.membership === 'vip' // 根据实际字段调整
			};
		},
		
		// 检查会员状态
		checkMembership() {
			// 非会员显示弹窗
			if (!this.userInfo.isMember) {
				this.showPopup = true;
			}
		},
		
		//菜单切换
		sectionChange(index) {
      this.current = index;
    },
    onMarkerTap(e) {
      console.log('点击了地图标记：', e.markerId);
    },
		
		
		// 缩放控制
		  onControlTap(e) {
		    const controlId = e.controlId;
		    if (controlId === 1) {
		      this.scale = Math.min(this.scale + 1, 20); // 放大
		    } else if (controlId === 2) {
		      this.scale = Math.max(this.scale - 1, 3); // 缩小
		    }
		    this.updateMap();
		  },
		  
		  // 地图区域变化监听
		  onRegionChange(e) {
		    if (e.type === 'end') {
		      this.mapContext.getCenterLocation({
		        success: res => {
		          this.mapLatitude = res.latitude;
		          this.mapLongitude = res.longitude;
		        }
		      });
		    }
		  },
		  
		  // 更新地图
		  updateMap() {
		    this.mapContext = uni.createMapContext('googleMap', this);
		    this.mapContext.moveToLocation();
		  },
			
			
			
    contactService(service) {
      console.log('联系商家：', service.name);
      uni.makePhoneCall({
        phoneNumber: '123456789', // 示例电话号码
      });
    },
    navigateTo(page) {
      console.log('跳转到：', page);
      uni.navigateTo({
        url: `/pages/tabbar/${page}/${page}`, // 示例路径
      });
    },
		// 开通会员
		openMembership() {
			uni.showLoading({ title: '处理中...' });
			
			// 调用开通会员API
			uni.request({
				url: 'https://your-api.com/membership/upgrade',
				method: 'POST',
				data: { userId: this.userInfo.id },
				success: (res) => {
					if (res.data.success) {
						// 更新本地状态
						this.userInfo.isMember = true;
						uni.setStorageSync('userInfo', {
							...this.userInfo,
							membership: 'vip'
						});
						
						uni.showToast({ title: '开通成功！', icon: 'success' });
					}
				},
				complete: () => {
					this.showPopup = false;
					uni.hideLoading();
				}
			});
		},
		
		// 关闭弹窗
		closePopup() {
			this.showPopup = false;
		}
  },
};
</script>
<style scoped lang="scss">
	.order-info {
	  background-color: white;
	  border-radius: 12rpx;
	  padding: 30rpx;
	  margin-top: 20rpx;
		.section-title {
		  font-size: 30rpx;
		  margin-bottom: 20rpx;
		}
		.shop-name {
		  font-size: 30rpx;
		  color: #666;
		  margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
		}
		
		.problem-description {
		  margin-bottom: 30rpx;
		}
		
		.label {
		  font-size: 28rpx;
		  color: #666;
		  margin-right: 10rpx;
		}
		
		.description {
		  font-size: 28rpx;
		  color: #333;
		}
		
		.upload-section {
		  margin-bottom: 30rpx;
		}
		
		.image-preview {
		  display: flex;
		  flex-wrap: wrap;
		  margin-top: 20rpx;
			.preview-image {
			  width: 190rpx;
			  height: 190rpx;
			  margin-right: 15rpx;
			  margin-bottom: 15rpx;
			  border-radius: 8rpx;
				.u-image{
					width:100%;
				}
			}
		}
	}
	
	.upload-btn {
	  width: 200rpx;
	  height: 200rpx;
	  border: 2rpx dashed #ccc;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  font-size: 60rpx;
	  color: #999;
	  border-radius: 8rpx;
	}
	
	.contact-info {
	  margin-bottom: 30rpx;
	}
	
	.contact-input {
	  margin-top: 20rpx;
	  border: 1rpx solid #eee;
	  padding: 20rpx;
	  border-radius: 8rpx;
	  font-size: 28rpx;
	}
	
	.action-buttons {
	  display: flex;
	  justify-content: right;
	  margin-top: 40rpx;
		.btn {
		  margin: 0 15rpx;
		  border-radius: 50rpx;
		  font-size: 14px;
			padding: 0 20px;
		}
		.cancel {
		  background-color: #f8f8f8;
		  color: #666;
		  border: 1rpx solid #ddd;
		}
		.confirm {
		  color: var(--primary-color);
			border: 1px solid var(--primary-color);
		}
	}
	
.page-container {
  display: flex;
  flex-direction: column;
  height: 90vh;
  background-color:var(--primary-backgrond-color);
}

.header {
  padding: 10px 15px;
  background-color: var(--primary-backgrond-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.non-urgent-service{
	position: relative;
	background-color: #fff;
	margin: 10px;
	min-height: 70vh;
}
.welcome-text {
  font-size: 16px;
	color: var(--text-color-g);
	padding: 2px 10px;
}

.header-icon {
  width: 20px;
  height: 20px;
  background-color: #ccc;
  border-radius: 50%;
}

.tab-menu {
  display: flex;
  justify-content: space-around;
  background-color: var(--primary-backgrond-color);
	margin: 10px;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
  font-size: 14px;
  color: #333;
}

.active-tab {
  color: var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
}

.map-container {
  height: 200px;
  background-color: #eaeaea;
}

.service-list {
  padding: 15px;
}

.service-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
}

.service-item {
  background-color: #fff;
  padding: 15px;
  margin-bottom: 10px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.service-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.service-name {
  font-size: 14px;
  color: #333;
}
.service-star{
	color:var(--primary-color);
	font-size: 14px;
	margin-right: 2px;
}
.service-mark{
	margin-left: 10px;
	font-size: 14px;
	color:var(--primary-color);
}
.service-type {
  font-size: 10px;
	color: #fff;
	padding:2px 5px ;
	margin-left: 10px;
	border-radius: 10px;
	background-color:var(--primary-color) ;
}
.price-box{
	color:  var(--text-color-g);
	display: flex;
	justify-content:space-between;
	padding: 2px;
	margin-bottom: 6px;
}
.service-price,
.service-distance {
  font-size: 12px;
  color: #666;
}

.service-actions {
  display: flex;
  justify-content: space-between;
}
.phoneClass{
		color:#666;
		font-size: 13px;
		display: flex;
		align-items: center;
	}
.service-actions>view{
	display: flex;
	justify-content: center;
}
.service-actions .tagList .tagItem{
	margin-right: 5px;
}

.action-btn {
  flex: 1;
  text-align: center;
  margin: 0 5px;
  padding: 5px;
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  border-radius: 4px;
  font-size: 12px;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  display: flex;
  background-color: #fff;
  border-top: 1px solid #ddd;
}

.nav-item {
  flex: 1;
  text-align: center;
  line-height: 50px;
  font-size: 14px;
  color: #666;
}
/* 弹窗 */
.local-popup{
	position: absolute; 
	top: 0; left: 0; 
	width: 100%; height: 100%; 
	background: rgba(190,190,190,0.9);
	z-index: 9;
}
	
.membership-dialog{
	font-size: 1rem;
	text-align: center;
	color: #10101066;
	background: white; 
	margin: 2rem; 
	padding: 2rem; 
	border-radius: 1rem;
	margin-top: 4rem;
}
	
.dialog-price{
	color: #333;
	margin: 1rem 0;
	margin-bottom: 1.6rem;
}
.button-group{
	display: flex;
	justify-content: center;
}
.button-group button{
	font-size: 0.9rem;
	margin: 0;
	padding:0 25px;
	border-radius: 200px;
	margin: 5px;
	border: 1px solid #ccc;
	color: #10101066;
}
.button-group  .openClass{
	border: 1px solid var(--primary-color);
	color: var(--primary-color);
}
</style>
